<template>
    <div class="activity-contain">
        <div class="main">
            <el-form :model="params" :rules="rules1" ref="information" label-width="120px" class="">
                <el-form-item label="商品名称：" prop="name">
                    <el-input v-model="params.name" placeholder="请输入商品名称"></el-input>
                </el-form-item>
                <el-form-item label="商品主图：" prop="cover_images">
                    <el-upload  list-type="picture-card"
                                :http-request="myUpload"
                                :action="upLoadUrl"
                                :class="{uploadShow:uploadShow}"
                                :file-list='fileCoverList'
                                :on-remove="handleRemoveCover"
                                :before-upload="beforeAvatarUpload" multiple>
                        <i class="el-icon-plus"></i>
                    </el-upload>
                </el-form-item>
                <el-form-item label="商品简介：" prop="desc">
                    <el-input v-model="params.desc" placeholder="请输入商品简介"></el-input>
                </el-form-item>
                <el-form-item label="商品详情图：" prop="pc_info_image">
                    <el-upload  list-type="picture-card"
                                :http-request="myUpload"
                                :action="upLoadUrl"
                                :class="{uploadShow:uploadShow}"
                                :file-list='filePcList'
                                :on-remove="handleRemovePc"
                                :before-upload="beforeAvatarUpload1" multiple>
                        <i class="el-icon-plus"></i>
                    </el-upload>
                </el-form-item>
                <el-form-item label="支付方式：" prop="pay_type">
                    <el-select v-model="params.pay_type" placeholder="请选择">
                        <el-option
                                v-for="item in options"
                                :key="item.value"
                                :label="item.label"
                                :value="item.value">
                        </el-option>
                    </el-select>
                </el-form-item>
                <el-form-item label="运费：" prop="">
                    <el-input v-model="params.express_cost" placeholder="请输入运费" @blur="handleBlur"></el-input>
                </el-form-item>
                <el-form-item>
                    <el-button type="primary" @click="submitForm('information')" >保存</el-button>
                    <el-button @click="$router.back()" type="primary" >返回</el-button>
                </el-form-item>
            </el-form>
        </div>
    </div>
</template>

<script>
	let CONSTANT = require('../constant/constant.js');
	let common = require("../common.js");
	export default {
		data() {
			return {
				id:'',
				upLoadUrl:'',
				dialogImageUrl:'',
				information: {
					id:'',
					picIds:[],
					isHot:'',
					rvName:'',
					contents:'',
					resume:'',
					provinceCode:'',
					provinceName:'',
					cityName:'',
					cityCode:'',
					priceDay:'',
					priceMonth:'',
					setNum:'',
					maxDriverRouter:'',
					outputVolume:'',
					gearBox:'',
					driverLicense:'',
					picMasterId:'',
					loadNum:'',
					bedNum:'',
					rvLevel:'',
					rvSize:'',
					maxSpeed:'',
					rvDesc:'',
					construction:'',
				},
				uploadShow1:false,
				uploadShow:false,
				dialogVisible:false,
				fileCoverList:[],
				filePcList:[],
				takeoutId:'',
				rules1: {
					name: [
						{ required: true, message: '请输入商品名字', trigger: 'blur' }
					],
					desc: [
						{ required: true, message: '请输入商品简介', trigger: 'blur' }
					],
					cover_images: [
						{ required: true, message: '请上传商品主图', trigger: 'blur' }
					],
					pc_info_image: [
						{ required: true, message: '请上传商品详情图', trigger: 'blur' }
					],
					pay_type: [
						{ required: true, message: '请选择支付方式', trigger: 'blur' }
					],
				},
				rules: {
					rvName: [
						{ required: true, message: '请输入房车车型', trigger: 'blur' },
						{ min: 1, max: 35, message: '长度在 1 到 35 个字', trigger: 'blur' }
					],
					resume: [
						{ required: true, message: '请输入简述', trigger: 'blur' },
						{ min: 1, max: 50, message: '长度在 1 到 50 个字', trigger: 'blur' }
					],
					picMasterId:[
						{required: true, message: '请上传图片', trigger: 'change'  }
					],
					picIds:[
						{required: true, message: '请上传图片', trigger: 'change'  }
					],
					isHot:[
						{required: true, message: '请选择是否热门', trigger: 'change'  }
					],
					cityCode:[
						{required: true, message: '请选择省市', trigger: 'change'  }
					],
					priceDay:[
						{required: true, message: '请填写日租价格', trigger: 'change'  }
					],
					priceMonth: [
						{ required: true, message: '请填写月租价格', trigger: 'change' },
					],
					status :[
						{ required: true, message: '请填选择状态', trigger: 'change' },
					]
				},
				provinceList:[],
				cityList:[],
				imageUrl:'',
				url: "",
				params: {
					name: "",
					desc: "",
					cover_images: [],
					pc_info_image: [],
					express_cost: ""
				},
				options: [{
					label: "余额",
					value: 1
				}, {
					label: "点券",
					value: 2
				},{
					label: "余额+点券",
					value: 3
				}]
			};
		},
		components:{
			'bg-editor':()=>import('./common/bg-editor.vue')
		},
		created(){
		},
		mounted() {
//			this.upLoadUrl = CONSTANT.URL.upload
			this.id  = this.$router.currentRoute.query.id;
			if(this.id){
				this.getDetail();
			}
		},
		methods: {
			getDetail:function(){
				let url = CONSTANT.URL.productDetail;
				common.requestGetAjax(url,{},{product_id: this.id},(res)=>{
					if(res.status == 0){
						this.params = Object.assign(res.data, {product_id: res.data.id})
						res.data.cover_images.map( item => {
							this.fileCoverList.push({
								url: item
							})
						})
						res.data.pc_info_images.map( item => {
							this.filePcList.push({
								url: item
							})
						})
					}
				})
			},
			beforeAvatarUpload(file) {
				const formData = new FormData()
				formData.append("file", file)
				let url = CONSTANT.URL.upload;
				common.requestAjax(url,formData,{},(res)=> {
					if (res.status == 0) {
						this.fileCoverList.push({
							url: res.data.url
						})
					}
				});
			},
			beforeAvatarUpload1(file) {
				const formData = new FormData()
				formData.append("file", file)
				let url = CONSTANT.URL.upload;
				common.requestAjax(url,formData,{},(res)=> {
					if (res.status == 0) {
						this.filePcList.push({
							url: res.data.url
						})
					}
				});
			},
			myUpload(content) {
				// 重写覆盖上传方法
			},
			handleRemoveCover(file ,fileList) {
				this.fileCoverList = fileList
			},
			handleRemovePc(file, fileList) {
				this.filePcList = fileList
			},


			handleRemove(file, fileList) {
				let deleteUrl = file.url;
				let list = this.fileShowList;
				list.forEach((item,index)=>{
					if(item.url == deleteUrl){
						list.splice(index,1);
						this.information.picIds.splice(index,1)
					}
				})
				if(list.length<9){
					this.uploadShow = false;
				}
				this.fileShowList = list;
			},
			handleRemove1(file, fileList) {
				this.uploadShow1 = false;
				this.fileShowList1 = [];
				this.information.picMasterId = ''
			},
			handlePictureCardPreview(file) {
				this.dialogImageUrl = file.url;
				this.dialogVisible = true;
			},
			handleFileSuccess(res, file) {
				if(res.status == 200){
					let picItem = res.data.bussData;
					this.information.images.push(picItem);
					if(this.information.images.length>=8){
						this.uploadShow = true;
					}
				}
			},
			editorInfo(val){
				this.information.contents = val;
			},
			submitForm(formName) {
				this.params.cover_images = []
				this.params.pc_info_image = []
				this.fileCoverList.map( item => {
					this.params.cover_images.push(item.url)
				})
				this.filePcList.map( item => {
					this.params.pc_info_image.push(item.url)
				})
				this.$refs[formName].validate((valid) => {
					if (valid) {
						let url = CONSTANT.URL.productEdit;
						common.requestAjax(url, this.params, null, res => {
							if(res.status == 0) {
								this.$message({
									type: 'success',
									message: '保存成功!'
								});
								this.$router.back();
							} else {
								this.$message({
									type: 'error',
									message: res.msg
								});
							}
						});
					} else {
						console.log('error submit!!');
						return false;
					}
				});
			},
			handleBlur(e) {
				console.log(e)
				if (e.target.value) {
					this.params.pay_type = 1
				}
			}
		}
	}
</script>

<style lang="scss" scoped >
    .activity-contain {
        .header{
            height: 46px;
            padding-bottom: 10px;
            border-bottom: 1px solid #dedede;
            p{ float: left;height: 36px;line-height: 36px;margin: 0 0 0 10px;font-size: 18px;}
            .el-button{
                float: right;
                margin-right: 5%
            }
        }
        .tip-img{
            font-size: 12px;
            color:red;
        }
        .main {
            // width:500px;
            //max-width: 1500px;
            .el-textarea{
                width: 60%;
            }
            .car-info{
                .car-list{
                    overflow: hidden;
                    .el-form-item{
                        float: left;
                        .el-input,.el-select{
                            width: 150px;
                        }
                    }
                }
            }
            margin: 20px 0 0 40px;
            clear: both;
            .el-input,
            .el-select {
                width: 250px;
            }
            .modal-body{
                .note-image-input{
                    display: block;
                }
            }
        }
    }
</style>
<style>
    .distpicker-address-wrapper select{
        margin-right: 20px;
    }
    .panel-heading{
        position: relative!important;
    }
    .note-toolbar{
        z-index: 10!important;
    }
    .uploadShow  .el-upload{display: none;}
</style>

